<template>
  <div class="container">
    <div class="page-title">个人信息</div>
    <div class="info-wrap">
      <div class="text-info">
        <div class="info-row">
          <div class="title">用户名称</div>
          <div v-if="!isEdit" class="data">{{ userInfo.username }}</div>
          <input
            v-else
            class="data-input"
            type="text"
            v-model="form.username"
          />
        </div>
        <div class="info-row">
          <div class="title">真实名称</div>
          <div v-if="!isEdit" class="data">{{ userInfo.real_name }}</div>
          <input
            v-else
            class="data-input"
            type="text"
            v-model="form.real_name"
          />
        </div>
        <!-- <div class="info-row">
          <div class="title">性别</div>
          <div v-if="!isEdit" class="data">{{ userInfo.gender }}</div>
          <input v-else class="data-input" type="text" v-model="form.gender" />
        </div>
        <div class="info-row">
          <div class="title">生日日期</div>
          <div v-if="!isEdit" class="data">{{ userInfo.dob }}</div>
          <input v-else class="data-input" type="text" v-model="form.dob" />
        </div> -->
        <div class="info-row">
          <div class="title">所在学校、公司</div>
          <div v-if="!isEdit" class="data">{{ userInfo.position }}</div>
          <input
            v-else
            class="data-input"
            type="text"
            v-model="form.position"
          />
        </div>
        <div class="info-row">
          <div class="title">个人简介</div>
          <div v-if="!isEdit" class="data">{{ userInfo.bio }}</div>
          <div v-else class="data-input intro-input">
            <div>{{ userInfo.bio }}</div>
            <textarea type="text" v-model="form.bio"></textarea>
          </div>
        </div>
        <div class="info-row">
          <div class="title">微信号</div>
          <div v-if="!isEdit" class="data">{{ userInfo.vxId }}</div>
          <input v-else class="data-input" type="text" v-model="form.vxId" />
        </div>
        <div class="info-row">
          <div class="title">QQ</div>
          <div v-if="!isEdit" class="data">{{ userInfo.qqId }}</div>
          <input v-else class="data-input" type="text" v-model="form.qqId" />
        </div>
        <div class="info-row">
          <div class="title">微博</div>
          <div v-if="!isEdit" class="data">{{ userInfo.wbId }}</div>
          <input v-else class="data-input" type="text" v-model="form.wbId" />
        </div>
      </div>
      <div class="profile-pic">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="uploadAvatar"
          :show-file-list="false"
          accept="image/jpeg,image/gif,image/png,image/jpg"
        >
          <img
            v-if="userInfo.thumbnail_url"
            :src="userInfo.thumbnail_url"
            class="avatar"
          />
          <i v-else class="el-icon-user-solid avatar-uploader-icon"></i>
          <div class="upload-box">更换头像</div>
        </el-upload>
      </div>
      <button v-if="!isEdit" class="edit-button" @click="edit()">
        编辑资料
      </button>
      <button v-else class="save-button" @click="save()">保存编辑</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      isEdit: false,
      userInfo: {
        bio: "",
        dob: "",
        email: "",
        gender: "",
        position: "",
        is_staff: "",
        is_superuser: "",
        password: "",
        real_name: "",
        scholarAuth: "",
        thumbnail_url: "",
        username: "",
        qqId: "",
        vxId: "",
        wbId: "",
      },
      form: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    edit() {
      this.form = this.userInfo;
      this.isEdit = true;
    },
    save() {
      if (this.form.name === "") {
        this.$message({
          showClose: true,
          message: "用户名称不可为空！",
          type: "warning",
        });
        return;
      }
      this.isEdit = false;
      //把form提交到后端
      let formData = new FormData();
      formData.append("username", this.form.username);
      formData.append("real_name", this.form.real_name);
      formData.append("position", this.form.position);
      formData.append("bio", this.form.bio);
      formData.append("qqId", this.form.qqId);
      formData.append("wbId", this.form.wbId);
      formData.append("vxId", this.form.vxId);
      this.$axios({
        method: "post",
        url: "/api/updateInfo",
        data: formData,
      })
        .then((res) => {
          console.log(res); 
          this.$message({
          showClose: true,
          message: "修改成功!",
          type: "success",
        });
        })
        .catch((err) => {
          console.log(err.response.data.code);
        });
    },
    async uploadAvatar(file) {
      const formData = new FormData();
      formData.append("thumbnail", file.file);
      console.log(file.file);

      await this.$axios({
        method: "post",
        url: "/api/addThumbnail",
        data: formData,
      })
        .then((res) => {
          console.log(res);
          this.userInfo.thumbnail_url = res.data.thumbnail_url;
          location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getUserInfo() {
      await this.$axios({
        method: "get",
        url: "/api/getUserMsg",
          header: {cookie:`sessionId=${this.form.sessionID}`},
      })
        .then((res) => {
          console.log(res);
          this.userInfo = res.data.backend_data;
          this.userInfo.thumbnail_url=sessionStorage.getItem('avatar');
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.edit-button,
.save-button {
  display: block;
  margin: 12px 0;
  padding: 8px 20px;
  border-radius: 5px;
  border: none;
  color: #fff;
  background-color: #7e8fe7;
  letter-spacing: 1px;
  cursor: pointer;
}
.upload-box {
  display: none;
  position: absolute;
  top: 0;
  height: 200px;
  width: 200px;
  padding: 160px 0 0 0;
  box-sizing: border-box;
  color: #dedede;
  background: linear-gradient(to top, #181818, #3b3b3b13);
}
.avatar-uploader:hover .upload-box {
  display: block;
}
img {
  margin: 0;
}
.avatar-uploader {
  position: relative;
  outline: 1px solid #d9d9d9;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 140px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: cover;
}
.data-input:focus,
textarea:focus {
  outline: none;
}
.data-input {
  display: inline-block;
  width: 500px;
  padding: 10px 5px;
  box-sizing: border-box;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  background-color: #dedede46;
  border-radius: 5px;
}
textarea {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 10px 5px;
  box-sizing: border-box;
  width: 500px;
  font-size: 16px;
  resize: none;
  border: none;
  letter-spacing: 1px;
  background-color: #dedede46;
  border-radius: 5px;
}
.intro-input > div {
  visibility: hidden;
}
.intro-input {
  position: relative;
  background-color: transparent;
}
.data {
  display: inline-block;
  width: 500px;
  padding: 10px 5px;
  box-sizing: border-box;
}
.profile-pic {
  display: inline-block;
  vertical-align: top;
  margin: 20px 0 0 20px;
}
.title {
  display: inline-block;
  width: 150px;
  padding: 10px 0;
  vertical-align: top;
  color: #888888;
}
.info-row {
  margin: 5px 0;
  width: 690px;
}
.text-info {
  display: inline-block;
  word-wrap: break-word;
}
.info-wrap {
  padding: 20px 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
</style>
